// 问卷页面通用样式（不含定位相关样式）

// 导航栏
.nav-bar {
  display: flex;

  .nav-bar-center {
    width: 100%;
    text-align: center;

    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 17px;

    position: relative;

    .title {
      width: 130px;
    }
  }

  .more-icon {
    display: block;
    position: absolute;
    right: calc(50% - 90px);
    top: 50%;
    transform: translate(-50%, -50%) rotate(90deg);
  }
}

.container {
  height: auto;
  padding-bottom: 119.23rpx;
  background-image: url('https://ustatic.hudongmiao.com/joymew-hostline/survey-bg.png');
  background-repeat: repeat-y;
  background-size: 100vw 216.4103vw;

  // 问卷头部
  .questionnaire-head {

    // 头图
    .head-cover {
      border-radius: 5px;
      overflow: hidden;
      position: relative;

      .img {
        width: 688.46rpx;
        height: 284.62rpx;
      }

      // 右上角角标
      .badge {
        width: 39px;
        height: 39px;
        background-color: rgba($color: #000000, $alpha: 0.6);
        // 三角形
        clip-path: polygon(0 0, 100% 100%, 100% 0);


        .icon {
          width: 23.08rpx;
          height: 23.08rpx;
        }
      }
    }

    // 问卷标题
    .head-title {
      width: 64.1026vw;
      font-size: 46.15rpx;
      font-weight: 600;
      text-align: CENTER;
      color: #333333;
      line-height: 46.15rpx;
    }

    // 问卷描述
    .questionnaire-describe {
      font-size: 28.85rpx;
      text-align: CENTER;
      color: #666666;
      line-height: 35.85rpx;
    }
  }

  // 结束语
  .conclusion {
    width: 688.46rpx;

    padding: 0 0 24px 0;
    font-size: 32.69rpx;
    font-weight: 600;
    color: #000000;
    line-height: 5.1282vw;
  }
}

// 「...」按钮
.more-icon {
  width: 34.62rpx;
  height: 34.62rpx;
}

// 弹窗通用样式
.popup {
  width: 100%;
  border-radius: 5.1282vw 5.1282vw 0px 0px;
  background-color: #fff;

  display: flex;
  flex-direction: column;

  position: relative;

  // 在底部添加白色背景遮挡，因为将弹窗组件的背景色设为透明了，会导致底部透明
  &::after {
    content: '';
    position: absolute;
    left: 0;
    bottom: -50px;
    z-index: 0;

    width: 100%;
    height: 50px;
    background-color: #fff;
  }

  // 行
  .row {
    width: 100%;
    height: 17.4359vw;

    display: flex;
    justify-content: center;
    align-items: center;
    margin-bottom: 0.46rpx;

    // 间隔线
    &:not(:last-child) {
      border-bottom: 1px solid #ececec;
    }
  }
}

// 底部固定栏
.bottom-bar {
  position: fixed;
  left: 0;
  bottom: 0;
  z-index: 99;

  width: 100%;
  height: 15.8974vw;
  background-color: #fff;

  padding-bottom: constant(safe-area-inset-bottom);
  /*兼容 IOS<11.2*/
  padding-bottom: env(safe-area-inset-bottom);
  /*兼容 IOS>11.2*/
  box-sizing: content-box;
  display: flex;
  justify-content: center;
  align-items: center;

  // 预览按钮
  .left-btn {
    margin-right: 54px;
    width: 6.1538vw;
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: center;

    .left-btn-icon {
      width: 46.15rpx;
      height: 46.15rpx;
    }

    .left-btn-text {
      font-size: 23.08rpx;
      text-align: CENTER;
      color: #333333;
      line-height: 23.08rpx;
      flex-wrap: nowrap;
    }
  }

  // 保存按钮
  .right-btn {
    width: 450rpx;
    height: 80.77rpx;
    background: #17ce92;
    border-radius: 7.69rpx;
    text-align: center;
    line-height: 80.77rpx;
    font-size: 30.77rpx;
    font-weight: 600;
    color: #ffffff;
  }

  // 「编辑」按钮
  .edit-btn {
    width: 30%;
    height: 80.77rpx;
    background: #17ce92;
    border-radius: 7.69rpx;
    text-align: center;
    line-height: 80.77rpx;
    font-size: 30.77rpx;
    font-weight: 600;
    color: #ffffff;
  }

  // 「创建」按钮
  .create-btn {
    margin-left: 20px;

    width: 30%;
    height: 80.77rpx;
    background: #17ce92;
    border-radius: 7.69rpx;
    text-align: center;
    line-height: 80.77rpx;
    font-size: 30.77rpx;
    font-weight: 600;
    color: #ffffff;
  }
}
